<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="" />
    <meta name="author" content="" />
    <link rel="icon" href="./img/asset-favicon.ico" />
    <title>社交-我的档案</title>
    <!-- 页面 css js -->
    <!-- <script type="text/javascript" src="../../plugins/sui/sui.min.js"></script> -->
    <link rel="stylesheet" type="text/css" href="./plugins/normalize-css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="./plugins/yui/cssgrids-min.css" />
    <link rel="stylesheet" type="text/css" href="./plugins/sui/sui.min.css" />
    <link rel="stylesheet" type="text/css" href="./plugins/sui/sui-append.min.css" />
    <link rel="stylesheet" type="text/css" href="./plugins/font-awesome/css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="./css/widget-base.css" />
    <link rel="stylesheet" type="text/css" href="./css/widget-head-foot.css" />
    <link rel="stylesheet" type="text/css" href="./css/page-sj-person-myfile.css" />

    <link rel="stylesheet" type="text/css" href="./css/page-sj-person-myanswer.css" />
    <link rel="stylesheet" type="text/css" href="./css/page-sj-person-myquestion.css" />

    <link rel="stylesheet" type="text/css" href="./css/page-sj-person-myfocus.css" />

    <link rel="stylesheet" type="text/css" href="./css/page-sj-person-mycollect.css" />

    <link rel="stylesheet" type="text/css" href="./css/page-sj-person-account.css" />
    <link rel="stylesheet" href="./css/element.css">
    <style>
        .login-bg {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0px;
            left: 0px;
            background: rgba(0, 0, 0, .5);
        }

        .profile-form {
            position: fixed;
            border: #ebebeb solid 1px;
            left: 50%;
            top: 50%;
            background: #ffffff;
            box-shadow: 0px 0px 20px #ddd;
            z-index: 9999;
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <!--引用组件-->
        <!--头部导航-->
        <header>
        </header>
    </div>
    <div id="app">
        <!--两列布局-->
        <div class="wrapper  myhome">
            <div class="sui-layout layout3">
                <div class="sidebar">
                    <div class="myhome-list">
                        <ul class="home-list">
                            <li :class="clickType==0?'active':''" @click='clickType=0'>
                                <a href="javascript:;">我的主页</a>
                            </li>
                            <li :class="clickType==1?'active':''" @click='clickType=1'>
                                <a href="javascript:;">我的回答</a>
                            </li>
                            <li :class="clickType==2?'active':''" @click='clickType=2'>
                                <a href="javascript:;">我的提问</a>
                            </li>
                        </ul>
                        <ul class="home-list bottom">
                            <li :class="clickType==3?'active':''" @click='clickType=3'>
                                <a href="javascript:;">我的关注</a>
                            </li>
                            <li :class="clickType==4?'active':''" @click='clickType=4'>
                                <a href="javascript:;">我的收藏</a>
                            </li>
                            <li :class="clickType==5?'active':''" @click='clickType=5'>
                                <a href="javascript:;">账户设置</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="content">
                    <div class="file-edit" v-show='clickType==0'>
                        <div class="info">
                            <h3 class="tit">
                                <span>个人档案</span>
                            </h3>
                            <!-- 个人信息 -->
                            <div class="sui-row-fluid person canadd">
                                <div class="span4 item">
                                    <h3 class="name">头像</h3>
                                    <img :src="user.avatar?user.avatar:'./img/widget-o-photo.png'" alt="" style='width:140px;height:140px' />
                                </div>
                                <div class="span4 item">
                                    <h3 class="name">真实姓名</h3>
                                    <p>{{user.realname?user.realname:'暂无'}}</p>
                                    <h3 class="name">出生日期</h3>
                                    <p>{{user.birthday?user.birthday:'暂无'}}</p>
                                    <h3 class="name">手机号码</h3>
                                    <p>{{user.mobile?user.mobile:'暂无'}}</p>
                                    <h3 class="name">现居城市</h3>
                                    <p>{{user.city?user.city:'暂无'}}</p>
                                </div>
                                <div class="span3 item">
                                    <h3 class="name">性别</h3>
                                    <p>{{user.sex==2?'女':'男'}}</p>
                                    <h3 class="name">个人网站</h3>
                                    <p>{{user.website?user.website:'暂无'}}</p>
                                    <h3 class="name">Email</h3>
                                    <p>{{user.email?user.email:'暂无'}}</p>
                                    <h3 class="name">通讯地址</h3>
                                    <p>{{user.address?user.address:'暂无'}}</p>
                                </div>
                                <div class="span1 edit" @click="show_profile_edit=true;show_mask=true">
                                    <span class="gray">
                                        <i class="fa fa-pencil" aria-hidden="true"></i> 编辑</span>
                                </div>
                                <div style="clear:both"></div>
                                <!-- info form -->
                                <div class="form-show profile-form" v-show="show_profile_edit">
                                    <div class="photo">
                                        <img :src="user.avatar?user.avatar:'./img/widget-o-photo.png'" alt="" style="width:140px;height:140px" />
                                        <div class="text">
                                            <input type="file" class="sui-btn btn-default" id='myFile' value="上传头像" name="img" @change='uploadImg'>
                                            <p>支持 jpg/jpeg/png 格式，大小不要超过 2MB</p>
                                        </div>
                                    </div>
                                    <form action="" class="sui-form">
                                        <div class="sui-row-fluid">
                                            <div class="span6">
                                                <div class="control-group">
                                                    <label for="" class="control-label">真实姓名</label>
                                                    <div class="controls">
                                                        <input type="text" id="name" class="input-large" placeholder="真实姓名" name="name" v-model="realname" />
                                                    </div>
                                                </div>
                                                <div class="control-group">
                                                    <label for="" class="control-label">出生日期</label>
                                                    <div class="controls">
                                                        <input type="text" id="birthday" v-model="birthday" class="input-large" placeholder="1970/01/01" name="birthday" />
                                                    </div>
                                                </div>
                                                <div class="control-group">
                                                    <label for="" class="control-label">手机号码</label>
                                                    <div class="controls">
                                                        <input type="text" id="telphone" class="input-large" v-model="mobile" placeholder="11位手机号码" name="telphone" />
                                                    </div>
                                                </div>
                                                <div class="control-group">
                                                    <label for="" class="control-label">现居城市</label>
                                                    <div class="controls">
                                                        <input type="text" id="city" v-model="city" class="input-large" placeholder="当前现居城市" name="city" />
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="span6">
                                                <div class="control-group" style="height: 60px;">
                                                    <label for="" class="control-label">性别</label>
                                                    <div class="controls">
                                                        <label data-toggle="radio" :class="sex==1?'radio-pretty inline checked':'radio-pretty inline '">
                                                            <span @click='sex=1'>男</span>
                                                        </label>
                                                        <label data-toggle="radio" :class="sex==2?'radio-pretty inline checked':'radio-pretty inline '">
                                                            <span @click='sex=2'>女</span>
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="control-group">
                                                    <label for="" class="control-label">个人网站</label>
                                                    <div class="controls">
                                                        <input type="text" id="net" class="input-large" placeholder="example.com" name="net" v-model="website" />
                                                    </div>
                                                </div>
                                                <div class="control-group">
                                                    <label for="" class="control-label">Email</label>
                                                    <div class="controls">
                                                        <input type="text" id="email" class="input-large" placeholder="用于收取通知，找回密码" name="email" v-model="email" />
                                                    </div>
                                                </div>
                                                <div class="control-group">
                                                    <label for="" class="control-label">通讯地址</label>
                                                    <div class="controls">
                                                        <input type="text" id="place" v-model="address" class="input-large" placeholder="当前通讯地址" name="place" />
                                                    </div>
                                                </div>
                                                <div class="control-group btns">
                                                    <button class="sui-btn btn-cancel" @click.prevent.stop="show_mask=false;show_profile_edit=false">取消</button>
                                                    <button class="sui-btn btn-save" @click.prevent.stop='saveDetail'>保存</button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <!-- 技术 -->
                            <div class="skill canadd">
                                <h3>
                                    <span class="name">擅长技术</span>
                                    <span class="gray edit" @click="show_jishu_edit=true;show_mask=true">
                                        <i class="fa fa-pencil" aria-hidden="true"></i> 编辑</span>
                                </h3>
                                <ul class="tag">
                                    <li v-for="item in interest" style="margin-left:10px;">{{item}}</li>
                                </ul>
                                <!-- skill form -->
                                <form action="" class="sui-form form-show form-skill profile-form" v-show="show_jishu_edit" @mouseenter="showalllabels=true"
                                    @mouseleave="showalllabels=false">
                                    <div class="tags-area" @mouseenter="showalllabels=true" @mouseleave="showalllabels=false">
                                        <div class="input-tags">
                                            <input type="text" placeholder="点击选择" disabled class="input-xfat input-xxlarge" id="tags" v-model="choose_interestname.join(' ')"
                                            />
                                        </div>
                                        <div class="tags-box" v-show="showalllabels==true">
                                            <ul class="sui-tag tag-bordered">
                                                <li class="tag-item" v-for="item in allLabels" @click="clickLabel(item.id,item.label_name)">{{item.label_name}}</li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="clearfix"></div>
                                    <div class="control-group btns">
                                        <button class="sui-btn btn-cancel" @click.stop.prevent="show_mask=false;show_jishu_edit=false">取消</button>
                                        <button class="sui-btn btn-save" @click.stop.prevent='saveLabel'>保存</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="right-content" v-show='clickType==1'>
                        <div class="answers">
                            <h4>
                                <span>我的回答</span>
                            </h4>
                            <ul class="answer-list">
                                <li v-for="item in user.answer_question">
                                    <span class="fl good">
                                        <span class="num">{{item.useful_count}}</span> 有用</span>
                                    <span class="title">
                                        <a :href="'/qa-detail.html?id='+item.problem" style="max-height: 100px" v-if="item.content.length<100">{{item.content}}</a>
                                        <a :href="'/qa-detail.html?id='+item.problem" style="max-height: 100px" v-else>{{item.content.substr(0,100) + '...'}}</a>
                                    </span>
                                    <span class="fr date">{{formatTime2(item.createtime)}}</span>
                                    <span class="clearfix"></span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="right-content" v-show='clickType==2'>
                        <div class="questions">
                            <h4>
                                <span>我的提问</span>
                            </h4>
                            <ul class="question-list">
                                <li v-for="item in user.questions">
                                    <span class="fl good">
                                        <span class="num">{{item.useful_count}}</span> 有用</span>
                                    <span class="title">
                                        <a :href="'/qa-detail.html?id=' + item.id">{{item.title}}</a>
                                    </span>
                                    <span class="fr date">{{formatTime2(item.createtime)}}</span>
                                    <span class="clearfix"></span>
                                </li>

                            </ul>
                        </div>
                    </div>
                    <div class="right-content" v-show='clickType==3'>
                        <div class="focus-list">
                            <div class="myfocus-list">
                                <ul class="sui-nav nav-tabs nav-large">

                                    <li :class="focusType==1?'active':''" @click='focusType=1'>
                                        <a href="javascript:;" data-toggle="tab">关注的标签</a>
                                    </li>
                                </ul>
                                <div class="tab-content tab-wraped">
                                    <div id="two" :class="focusType==1?'tab-pane active':'tab-pane'" v-show='focusType==1'>
                                        <ul class="focuspro-list">
                                            <li class="pro-item" v-for="(item,index) in interest">
                                                <a :href="'qa-tagDetail.html?id='+interestid[index]" target="_blank">{{item}}</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="right-content" v-show='clickType==4'>
                        <div class="focus-list">
                            <div class="mycollect-list">
                                <ul class="sui-nav nav-tabs nav-large">
                                    <li :class="collectType==0?'active':''">
                                        <a href="javascript:;" data-toggle="tab" @click='collectType=0'>收藏的文章</a>
                                    </li>
                                    <li :class="collectType==1?'active':''">
                                        <a href="javascript:;" data-toggle="tab" @click='collectType=1'>收藏的企业</a>
                                    </li>

                                </ul>
                                <div class="tab-content tab-wraped">
                                    <div id="one" :class="collectType==0?'tab-pane active':'tab-pane'" v-show="collectType==0">
                                        <ul class="collect-list">
                                            <li class="collect-item" v-for="item in user.collected_articles">
                                                <div class="intro">
                                                    <div class="fl content" style="margin-left:0">
                                                        <p class="title">{{item.title}}</p>
                                                        <p class="link">
                                                            <a :href="'headline-detail.html?id='+item.id">点击查看文章详情</a>
                                                        </p>
                                                    </div>
                                                    <div class="fr info">
                                                        <img :src="item.user.avatar?item.user.avatar:'./img/widget-photo.jpg'" alt="" style="height:50px;width:50px">
                                                        <span class="author">{{item.user.username}}</span>
                                                    </div>
                                                    <div class="clearfix"></div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                    <div id="two" :class="collectType==1?'tab-pane active':'tab-pane'" v-show="collectType==1">
                                        <ul class="company-list">
                                            <li class="company-item" v-for="item in user.enterpises">
                                                <div class="fl">
                                                    <p>
                                                        <a :href="'/recruit-job.html?id='+item.id">
                                                            <span class="name">{{item.name}}</span>
                                                        </a>
                                                        <span class="job">{{item.recruits.length}}个职位在招聘</span>
                                                    </p>
                                                    <p>{{item.summary}}</p>
                                                </div>
                                                <div class="clearfix"></div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="right-content" v-show='clickType==5'>
                        <div class="home-content">

                            <div class="activities account-type">
                                <h4 class="tit">
                                    <span>账户设置</span>
                                </h4>
                                <div class="account-main">


                                    <div class="account-person">
                                        <h3>个人账号</h3>
                                        <ul class="account-info">
                                            <li>
                                                <span class="gray index">名字</span>
                                                <span class="info">{{user.realname?user.realname:'暂无'}}</span>

                                            </li>
                                            <li>
                                                <span class="gray index">个性网址</span>
                                                <span class="info">{{user.website?user.website:'暂无'}}</span>

                                            </li>
                                            <li>
                                                <span class="gray index">Email </span>
                                                <span class="info">{{user.email?user.email:'暂无'}}</span>

                                            </li>
                                            <li>
                                                <span class="gray index">手机号码 </span>
                                                <span class="info">{{user.mobile?user.mobile:'暂无'}}</span>

                                            </li>
                                            <li>
                                                <span class="gray index">密码 </span>
                                                <span class="info">点击修改密码</span>
                                                <form action="" class="sui-form form-inline" v-show='show_edit_pwd'>
                                                    <input type="password" placeholder="输入新的密码" v-model='new_pwd' />
                                                    <button class="sui-btn btn-danger save-btn" @click.stop.prevent='save_pwd'>保存</button>
                                                </form>
                                                <span class="gray edit" @click='show_edit_pwd=true'>
                                                    <i class="fa fa-pencil" aria-hidden="true"></i> 编辑</span>
                                            </li>
                                            <li>
                                                <button class="sui-btn btn-danger save-btn" @click.stop.prevent='logout'>退出登录</button>
                                            </li>
                                        </ul>
                                    </div>

                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
        <div id="bg" class="login-bg" v-show="show_mask"></div>
    </div>
    <div class="footer">
        <div class="wrapper">
            <div class="footer-bottom">
                <div class="link">
                    <dl>
                        <dt>
                            网站相关
                        </dt>
                        <dd>
                            关于我们
                        </dd>
                        <dd>
                            服务条款
                        </dd>
                        <dd>
                            帮助中心
                        </dd>
                        <dd>
                            编辑器语法
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            常用链接
                        </dt>
                        <dd>
                            传智播客
                        </dd>
                        <dd>
                            传智论坛
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            联系我们
                        </dt>
                        <dd>
                            联系我们
                        </dd>
                        <dd>
                            加入我们
                        </dd>
                        <dd>
                            建议反馈
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            关注我们
                        </dt>
                        <dd>
                            微博
                        </dd>
                        <dd>
                            twitter
                        </dd>
                    </dl>
                    <div class="xuke">
                        <h3>内容许可</h3>
                        <p>除特别说明外，用户内容均采用知识共享署名-非商业性使用-禁止演绎4.0 国际许可协议 (CC BY-NC-ND 4.0) 进行许可</p>
                        <p>本站由 传智研究院 提供更新服务</p>
                    </div>
                </div>
                <p class="Copyright">Copyright &copy; 2017 传智问答社区 当前版本 0.0.1</p>
            </div>
        </div>
    </div>

</body>

</html>
<script src="js/host.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/element.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/person.js"></script>
